
<!DOCTYPE HTML>

<html lang="en">
 
    <head>
        <meta charset="UTF-8">
        <title>dialog_tooltip</title>
        <script src="../style/js/jquery.js"></script>
        <script src="../style/js/bt.dwz.js"></script>
    </head>
    <body>

        <div class="container">
            <div class="well">
                <button class="btn" layer="alert" alertMsg="一个很普通的信息框" alertType="1">信息框1</button>
                <button class="btn" layer="alert" alertMsg="信息框演示二" alertType="2" alertTit="信息框" alertYes="a(this)">信息框2</button>
                <!--layer：弹框类型，alertMsg：信息内容（文本） 如果没有该标签，则内容自动默认"请输入内容"，alertType：提示图标（整数，0-10的选择），alertTit：标题（文本），alertYes：按钮的回调函数-->
                <button class="btn" layer="confirm" conMsg="信息框演示三" conTit="信息" conYes="a10();alert('a10')" conNo="a11()">信息框3</button> 
                <!--layer：弹框类型，conMsg：信息内容（文本） 如果没有该标签，则内容自动默认"请输入内容"，conYes：按钮一回调，conTit：标题（文本），conNo：按钮二的回调-->   
                <button class="btn" layer="msg" msgText="3秒后关闭" callback="a(this)" msgTime="3">信息框4</button> 
                <!--layer：弹框类型，msgText：信息内容（文本）如果没有该标签，则内容自动默认"请输入内容"，msgTime：自动关闭所需等待秒数（默认2秒）,callback:回调(该回调函数实际调用时间:msgTime+200毫秒)-->      
            </div>
            <div class="alert alert-error">
                <button class="btn" layer="layer" options="{type: 2,title: false,iframe: { src: 'http://www.baidu.com' },area: ['1000px', '500px']}" success="{direction:'bottom',time: 400}">iframe层从下弹出</button>
                <button class="btn" layer="layer" options="{type: 2,title: '天之痕三个人的时光-半抱琵琶版',iframe: { src: 'http://www.tudou.com/v/Rvy0IbYmBrQ/&resourceId=0_04_05_99/v.swf' },area: ['750px', '466px'],offset: ['100px', '']}" >iframe层之中央</button>
            
            </div>
            <div class="alert alert-success">
                <button class="btn" layer="layer" options="{type: 2,shade: [0],fix: false,title: ['iframe子父操作', true],iframe: { src: 'a.html' },area: ['1000px', '500px'],offset: ['150px', '']}" close="a12(data);">iframe层之返回父窗口元素值</button>
                <!--close:子窗口关闭时，该回调函数,第一个参数为data（子窗口返回的JSON值）-->
            </div>
            <div class="alert alert-success">
                <div class="input-append">
                    <input class="span2" type="text" accept="tt1" placeholder="查找带回1">
                    <span class="add-on"><i class="icon-search" layer="layer" setaccept="tt1" options="{type: 2,shade: [0],fix: false,title: ['查找带回', true],iframe: { src: 'c.html' },area: ['1000px', '500px'],offset: ['150px', '']}"></i></span>
                </div>
                <div class="input-append">
                    <input class="span2" type="text" accept="tt2" placeholder="查找带回2">
                    <span class="add-on"><i class="icon-search" layer="layer" setaccept="tt2" options="{type: 2,shade: [0],fix: false,title: ['查找带回', true],iframe: { src: 'd.html' },area: ['1000px', '500px'],offset: ['150px', '']}"></i></span>
                </div>
            </div>
            <!--layer：弹框类型，success:{方向(direction):top bottom left right left-bottom right-bottom left-top right-top,时间(time):400(毫秒)}，options:{type:弹框样式,title:标题，iframe:子html，area:宽，高},close:关闭(x)层回调函数，如有参数则为获取该层传递的json值,例如:a12(data)-->
            <div class="alert">
                <button class="btn" layer="load" parme="3" loadIcon="1" callback="a(this)">等待3秒样式1</button>
                <button class="btn" layer="load" parme="等待三秒" loadIcon="3" times="3" callback="a(this)">等待3秒样式2</button>
                <button class="btn" layer="load" parme="0" close="close1(load)">无限等待样式1</button>
                <button class="btn" layer="load" parme="无限等待中.." close="close2(load)">无限等待样式2</button>
                <!--parme:必填, 如果parme是一个数字，意味着parme为自动关闭所需最长等待秒数(0时则不自动关闭);loadIcon：非必填,加载图标（整数，0-3的选择）；times:非必填,用于时间显示(如果有times，则parme标签则为显示文字内容);callback:非必填，如果该标签是调用无限等待，则不会激发callback；close:返回关闭的标记，可根据情况，在该回调函数中手动关闭（load为接收的关闭标记参数）;-->
            </div>
            <div class="alert alert-info">
                <button class="btn" layer="tips" html="比如实现用户小名片什么的呀." parme="{guide: 0,style: ['background-color:#0FA6D8; color:#fff', '#0FA6D8'],maxWidth: 150}">点击tips上</button>
                <button class="btn" layer="tips" html="你瞧那远古的光/裸露空荡/无穷无尽是你深邃的眼/传递遐想 ——《远与暗》 写于2012·春·杭州." parme="{guide: 1,time: 4,style: ['background-color:#F26C4F; color:#fff', '#F26C4F'],maxWidth: 240}">点击tips右</button>
                <button class="btn" layer="tips" html="非常感谢大家对layer的支持，正因为你们，才让小小组件有了大大的关注。2014，加油！." parme="{guide: 2,maxWidth: 240}">点击tips下</button>
                <button class="btn" layer="tips" html="更多效果你自己慢慢发现吧." parme="{guide: 3,style: ['background-color:#c00; color:#fff', '#c00'],time: 1}">点击tips左</button>
                <!--layer：弹框类型，html：信息内容（文本），parme：包含了{guide:指引方向, time:自动关闭所需等待秒数, style: tips样式, maxWidth:最大宽度-->   
            </div>
            <div class="well">
                <ul class="bs-docs-tooltip-examples">
                    <li><a title="" tooltip="popover" data-content="再次点击关闭" data-placement="top" data-toggle="popover" class="btn" href="#">点击Popover上</a></li>
                    <li><a title="" tooltip="popover" data-content="再次点击关闭" data-placement="right" data-toggle="popover" class="btn" href="#" data-original-title="标题">点击Popover右</a></li>
                    <li><a title="" tooltip="popover" data-content="再次点击关闭" data-placement="bottom" data-toggle="popover" class="btn" href="#" data-original-title="标题">点击Popover下</a></li>
                    <li><a title="" tooltip="popover" data-content="再次点击关闭" data-placement="left" data-toggle="popover" class="btn" href="#" data-original-title="标题">点击Popover左</a></li>
                </ul>
            </div>
            <div class="alert alert-info">
                <button class="btn tooltips" tooltip="tooltip" data-placement="top" data-toggle="tooltip" data-original-title="Tooltip on top">悬停tooltip上</button>
                <button class="btn tooltips" tooltip="tooltip" data-placement="right" data-toggle="tooltip" data-original-title="Tooltip on right">悬停tooltip右</button>
                <button class="btn tooltips" tooltip="tooltip" data-placement="bottom" data-toggle="tooltip" data-original-title="Tooltip on bottom">悬停tooltip下</button>
                <button class="btn tooltips" tooltip="tooltip" data-placement="left" data-toggle="tooltip" data-original-title="Tooltip on left">悬停tooltip左</button>
            </div>
            <div class="well">
                <a href="#myModal" role="button" class="btn" data-toggle="modal">本页对话框</a>
                <!-- Modal -->
                <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="myModalLabel">Modal header</h3>
                    </div>
                    <div class="modal-body">
                        <p>One fine body…</p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" onclick="a10();">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            function a(t) {
                //alert("我是回调函数" + " " + "参数:" + t || "");
                if ($(t).length > 0) {
                    alert($(t).html());
                }
            }
            function a10() {
                alert("你按了确定");
            }
            function a11() {
                alert("你按了取消");
            }
            function a12(json) {
                var str = "";
                for (var i = 0; i < json.length; i++) {
                    str += "name:" + json[i].name + "&value:" + json[i].value + ";"
                }
                alert(str);
            }
            function a13(json) {
                var str = "";
                for (var i = 0; i < json.length; i++) {
                    str += "name:" + json[i].name + "&value:" + json[i].value + ";"
                }
                alert("子页面点击事件:" + str);
            }
            function close1(load) {
                alert("接收标记，3秒后手动关闭");
                setTimeout(function () { layer.close(load); }, 3000);

            }
            function close2(load) {
                //setTimeout(function () { layer.close(load); }, 1500);
            }
        </script>
    </body>
</html>
 <!--   <body>
        <a href="a.html" target="dialog">百度</a>
        <a href="a.html" target="dialog">google</a>
        <script type="text/javascript">
            /*  var 
            links = document.querySelectorAll('a');
            for (var i = 0; i < links.length; i++) {
            links[i].addEventListener('click', function (evt) {
            evt.preventDefault()
            alert("for " + this.href)
            });
            }*/
           
            
        </script>
    </body>
-->